<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索栏表单 -->
        <el-form
          ref="form"
          :inline="true"
          label-width="80px"
        >
          <el-row type="flex" justify="space-between">
            <el-col :span="20">
              <el-form-item label="关键字">
                <el-input
                  v-model="query.keyword"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="query.state" placeholder="请选择">
                  <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>

            <!-- 新增技巧按钮 -->
            <el-col :span="4">
              <el-button type="success" @click="addAticle" >
                <i class="el-icon-edit"></i>
                <span>新增技巧</span>
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 消息提示 -->
        <el-alert
          :title="cTitle"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <!-- 主体表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column label="文章标题" width="400">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
              <i
                v-if="scope.row.videoURL"
                class="el-icon-film"
                @click="playerM(scope.row)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数" />
          <el-table-column prop="username" label="录入人" />
          <el-table-column label="录入时间" >
            <template slot-scope="scope">
              {{ scope.row.createTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="100">
            <template slot-scope="scope">
              {{ scope.row.state | status }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="preview(scope.row)"
                >预览</el-button
              >
              <el-button type="text" @click="toggle(scope.row)">
                {{ scope.row.state === 1 ? "禁用" : "启用" }}
              </el-button>
              <el-button
                :disabled="scope.row.state === 1"
                type="text"
                @click="reviseArticle(scope.row)"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.state === 1"
                type="text"
                @click="delArticle(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 视频弹框 -->
        <el-dialog
          :visible.sync="showVideo"
          width="50%"
          @close-on-click-modal="false"
          @close-on-press-escape="false"
        >
          <video
            :src="article.videoURL"
            controls="controls"
            style="width: 100%; height: 100%"
          ></video>
        </el-dialog>

        <!-- 预览弹框 -->
        <el-dialog
          title="预览文章"
          :visible.sync="showDialog"
          width="50%"
          @close-on-click-modal="false"
          @close-on-press-escape="false"
        >

          <!-- 弹框信息文本 -->
          <h1>{{ article.title }}</h1>
          <p>
            <span>{{ article.createTime | formatTime }}</span>
            <span class="spanarticle">{{ article.username }}</span>
            <i class="el-icon-view"></i>
            <span class="spanarticle">{{ article.visits }}</span>
          </p>
          <span class="bodyDialog" v-html="article.articleBody"></span>
        </el-dialog>

        <!-- 修改弹框 -->
        <el-dialog
          :title="isEdit ? '修改文章' : '新增文章'"
          :visible.sync="showReviseDialog"
          width="50%"
          @close-on-click-modal="false"
          @close-on-press-escape="false"
          @close="close"
        >
          <!-- 修改文章子组件组件 -->
          <revise-dialog
            v-if="showReviseDialog"
            ref="articleForm"
            :article="article"
            @close="closeForm"
            :isEdit="isEdit"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'// 导入api
import dayjs from 'dayjs' // 导入时间插件
import { status } from '@/api/hmmm/constants'// 导入枚举数据
import ReviseDialog from './companys/reviseDialog'// 导入弹框组件

export default {
  name: 'Articles',
  data () {
    return {
      disabled: false, // 按钮禁用状态
      list: [], // 文章列表
      query: {
        page: 1, // 页码
        pagesize: 10, // 页码显示的条数
        keyword: '' // 关键字
      },
      status,
      counts: 100, // 数据总条数
      showDialog: false, // 是否展示弹框
      article: {}, // 文章详情
      showReviseDialog: false, // 修改弹框是否显示
      isEdit: false, // 是否为编辑状态
      showVideo: false// 是否展示视频
    }
  },

  computed: {
    cTitle () {
      return `数据一共${this.counts}条`
    }
  },

  components: {
    ReviseDialog
  },

  filters: {
    //  格式化时间
    formatTime (value) {
      return dayjs(value).format('YYYY-MM-DD h:mm:ss')
    },
    // 格式化状态
    status (val) {
      const obj = status.find((item) => item.value === val)
      return '已' + obj.label
    }
  },

  created () {
    //   获取文章列表
    this.getList()
  },

  methods: {
    //   获取文章列表
    async getList () {
      const res = await list(this.query)
      // 给列表赋值
      this.list = res.data.items
      this.counts = res.data.counts
    },

    //  每页显示的条数发生改变触发
    handleSizeChange (newPagesize) {
      this.query.pagesize = newPagesize
      this.getList()
    },

    //  页码发生改变触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getList()
    },

    //  切换状态,发起请求，更新列表
    async toggle (row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      const res = await changeState(row)
      if (!res.data.success) this.$message.error('操作失败')
      if (res.data.state === 0) {
        this.$message.success('文章已启用')
      } else {
        this.$message.success('文章已禁用')
      }
      this.getList()
    },

    // 搜索
    search () {
      this.getList()
    },

    //  清除搜索
    resetForm () {
      this.query = {
        page: 1, // 页码
        pagesize: 10, // 页码显示的条数
        keyword: '' // 关键字
      }
      this.getList()
    },

    //  新增文章
    addAticle () {
      this.showReviseDialog = true
      this.isEdit = false
    },

    //  预览，获取文章详情
    async preview (row) {
      this.showDialog = true
      this.article = row
    },

    //  修改文章
    reviseArticle (row) {
      this.isEdit = true
      this.showReviseDialog = true
      this.article = row
    },

    // 删除文章
    async delArticle (row) {
      const delRes = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (delRes === 'cancel') return this.$message.info('您取消了删除')
      const res = await remove(row)
      // 删除分页优化
      if (this.list.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      if (!res.data.success) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getList()
    },

    // 关闭新增/修改弹框,清空表单
    close () {
      this.showReviseDialog = false
      this.$refs.articleForm.resetForm()
      this.isEdit = false
    },

    //  关闭弹框，更新列表
    closeForm () {
      this.showReviseDialog = false
      this.getList()
    },

    //  播放视频
    playerM (row) {
      this.showVideo = true
      this.article = row
    }
  }
}
</script>

<style scoped>
.el-alert.el-alert--info.is-light {
    margin-bottom: 20px;
}
.el-col.el-col-4 {
    text-align: right;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
.bodyDialog {
  display: block;
  width: 100%;
  padding: 20px 30px;
  background-color: #f5f5f5;
  border-top: 1px dashed #d1d1d1;
}
.spanarticle {
  margin: 0 10px;
}
p {
  padding-left: 10px;
}
.el-icon-film {
  color: #0000ff;
  margin-left: 10px;
}
</style>
